<template>
  <div class="spec-preview">
      <img :src="currentImg.imgUrl"/>
    <div class="event" @mouseenter="isShow=true" @mouseleave="isShow=false" @mousemove="mouseMove" ref="eventRef"></div>
    <div class="big" v-show="isShow">
        <img :src="currentImg.imgUrl"  ref="bigImgRef"/>
    </div>
    <div class="mask" v-show="isShow" ref="maskRef"></div>
  </div>
</template>

<script>
  export default {
    name: "Zoom",
      props:{
          skuImageList:{
              type:Array,
              default:()=>([])
          }
      },
      data() {
          return {
              isShow: false,
              imgIndex:0
          }
      },
      computed: {
          currentImg() {
              return this.skuImageList[this.imgIndex] || {}
          }
      },
      mounted() {
        this.$bus.$on('indexChange',this.changeIndex);
      },
      methods:{
        //放大镜效果
          mouseMove(e){
              // ##### clientX & clientY
              // 拿的是鼠标相对视口的水平距离和垂直距离，相对的是视口的左上角（以视口左上角为原点）
              // ##### pageX & pageY
              // 拿的是鼠标相对页面的水平距离和垂直距离，相对的是页面的左上角（以页面左上角为原点）
              // ##### offsetX & offsetY
              // 拿的是鼠标相对自身元素的水平距离和垂直距离，相对的是自身元素左上角（以自身元素左上角为原点）
    
              // 获取鼠标实时的位置,相对于自身元素的左上角
              // console.log(e.offsetX, e.offsetY);
    
              // ### client系列    只读
              // **clientWidth**
              // **拿的是盒子   内容 + padding的宽；**
              // **clientHeight**
              // **拿的是盒子   内容 + padding的高；**
              // clientLeft
              // 拿的是盒子左边框大小；
              // clientTop
              // 拿的是盒子上边框大小；
    
              // offset系列    只读
              // **offsetWidth**
              // **拿的是盒子   内容 + padding + border的宽**
              // **offsetHeight**
              // **拿的是盒子   内容 + padding + border的高**
              // **offsetLeft**
              // **拿的是元素的偏移量：可以认为就是拿的绝对定位left值**
              // **offsetTop**
              // **拿的是元素的偏移量：可以认为就是拿的绝对定位top值**
              // **这两个值，相对的参照物和绝对定位完全一样；**
    
              // scroll系列
              // scrollWidth 只读
              // 当内容比盒子小的时候，拿的是盒子的clientWidth
              // 当内容比盒子大的时候，拿的是内容的offsetWidth + 内容的一侧外边距 + 盒子的一侧内边距；
              // scrollHeight 只读
              // 当内容比盒子小的时候，拿的是盒子的clientHeight
              // 当内容比盒子大的时候，拿的是内容的offsetHeight + 内容的一侧外边距 + 盒子的一侧内边距；
              // **scrollTop 可读可写**
              // **拿的是盒子内容向上滚动的距离**
              // **scrollLeft 可读可写**
              // **拿的是盒子内容向左滚动的距离**
              let endX = e.offsetX -this.$refs.maskRef.offsetWidth/2;
              let endY = e.offsetY -this.$refs.maskRef.offsetHeight/2;
                if (endX<0){
                    endX = 0
                }else if (endX >this.$refs.eventRef.offsetWidth-this.$refs.maskRef.offsetWidth){
                    endX = this.$refs.eventRef.offsetWidth-this.$refs.maskRef.offsetWidth
                }
                if (endY < 0){
                    endY = 0
                }else if (endY >this.$refs.eventRef.offsetHeight-this.$refs.maskRef.offsetHeight){
                    endY = this.$refs.eventRef.offsetHeight-this.$refs.maskRef.offsetHeight
                }
              //蒙层的移动
              this.$refs.maskRef.style.left = endX + "px";
              this.$refs.maskRef.style.top = endY + "px";
              //大图片的移动  是相反方向的两倍
              this.$refs.bigImgRef.style.left = - 2*endX + "px";
              this.$refs.bigImgRef.style.top = - 2*endY + "px";
              
          },
        //修改放大镜图片图片效果
          changeIndex(index){
              this.imgIndex = index
          }
      }
  }
</script>

<style lang="less">
  .spec-preview {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;

    img {
      width: 100%;
      height: 100%;
    }

    .event {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 998;
    }

    .mask {
      width: 50%;
      height: 50%;
      background-color: rgba(0, 255, 0, 0.3);
      position: absolute;
      left: 0;
      top: 0;
    }

    .big {
      width: 100%;
      height: 100%;
      position: absolute;
      top: -1px;
      left: 100%;
      border: 1px solid #aaa;
      overflow: hidden;
      z-index: 998;
      background: white;

      img {
        width: 200%;
        max-width: 200%;
        height: 200%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
</style>